
<template>
<div>
	<transition :name="transitionName">   
      <!-- <router-view v-if="!$route.meta.keepAlive"></router-view> -->
		<router-view></router-view>
	</transition>
	
</div>
	
</template>
<script>



export default {
	name: 'App',
	data() {
		return {
			transitionName:''
		}
	},
	watch: {//使用watch 监听$router的变化
		$route(to, from) {
			//如果to索引大于from索引,判断为前进状态,反之则为后退状态
			if(to.meta.index > from.meta.index){
				//设置动画名称
				this.transitionName = 'slide-left';
			}else{
				this.transitionName = 'slide-right';
			}
		}
	},


	mounted(){
		const  deviceWidth = Math.min(640, window.innerWidth)
		document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'

		window.onload=function () {
			document.addEventListener('touchstart',function (event) {
				if(event.touches.length>1){
					event.preventDefault();
				}
			});
			
			var lastTouchEnd=0;

			document.addEventListener('touchend',function (event) {
				var now=(new Date()).getTime();
				if(now-lastTouchEnd<=300){
					event.preventDefault();
				}
				lastTouchEnd=now;
			},false);

			document.addEventListener('gesturestart', function (event) {
				event.preventDefault();
			});
		}
	}
}
</script>
<style>
body,#app,.app-home{
    width:7.5rem;
    min-height: 100vh;
    position: relative;
	text-align: center;
	margin:0 auto;
	overflow-x: hidden;
    background: rgba(249,249,248,1);
}

.app-home::-webkit-scrollbar { width: 0 !important; display: none }

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>

